<template>
  <div class="test-chart">
    <div id="chart"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chart: null,
      option: {
        tooltip: { position: "top" },
        grid: { height: "80%", top: "5%" },
        xAxis: {
          type: "category",
          data: [],
          splitArea: { show: true },
          axisLabel: { rotate: 20 },
        },
        yAxis: {
          type: "category",
          data: [],
          splitArea: { show: true },
          position: "right",
        },
        visualMap: {
          min: 0,
          max: 100,
          calculable: true,
          orient: "horizontal",
          left: "center",
          bottom: "0",
          inRange: { color: ["white", "green"] },
        },
        series: [
          {
            name: "热力分布",
            type: "heatmap",
            data: [],
            emphasis: {
              itemStyle: { shadowBlur: 10, shadowColor: "rgba(0, 0, 0, 0.5)" },
            },
          },
        ],
      },
    };
  },
  mounted() {
    let yData = new Array(24).fill("").map((_, i) => {
      let start = (i + "").padStart(2, "0");
      let end = (i + 1 + "").padStart(2, "0");
      return `${start}:00~${end}:00`;
    });
    this.option.yAxis.data = yData;
    let time = new Date();
    let day = time.getDate();
    let xData = new Array(30)
      .fill("")
      .map((_, i) => {
        return this.$echarts.format.formatTime("MM-dd", time.setDate(day - i));
      })
      .reverse();
    this.option.xAxis.data = xData;
    let data = new Array(30).fill("").map((_, i) => {
      return new Array(24).fill("").map((_, j) => {
        let diff = 100 - i - j;
        return i + j + Math.floor(Math.random() * diff);
      });
    });
    data = data.reduce((res, item, index) => {
      item.forEach((v, i) => {
        res.push([index, i, v]);
      });
      return res;
    }, []);
    this.option.series[0].data = data;
    this.chart = this.$echarts.init(document.getElementById("chart"));
    this.chart.setOption(this.option, true);
  },
};
</script>
<style lang="scss">
.test-chart {
  #chart {
    width: 1000px;
    height: 600px;
    margin: 20px auto;
  }
}
</style>